<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.min.js"></script>
    <script type="text/babel">



     class Example extends React.Component {
       constructor(props){
           super(props);
           //在组件初始化可以直接操作this.state
           this.state = {
               val: 0
           }
       }
       componentDidMount(){
           this.setState({
              val: this.state.val + 1
           });
           //第一次输出
           console.log("第1次" + this.state.val);  //0
           this.setState({
              val: this.state.val + 1
           });
           //第二次输出
           console.log("第2次" + this.state.val);  //0
           setTimeout(()=>{
              this.setState({
                  val: this.state.val + 1
                });
               //第三次输出
               console.log("第3次" + this.state.val);  //2
               this.setState({
                  val: this.state.val + 1
               });
               //第四次输出
               console.log("第4次" + this.state.val); //3
           }, 0);  
       }
       render(){
           return null;
       }
   }
   ReactDOM.render(
            <Example />,
            document.getElementById("app")
        )
    </script>
    
</body>
</html>